<template>
  <view class="goods-wrap">
    <view class="goods" v-for="(item, index) in goods.list" :key="index">
      <view class="top" @tap="edit(index)">
        <view class="left">
          <view class="goods-img">
            <image
              mode="aspectFill"
              v-if="item[myForm.imgField]"
              :src="$filters.filterImg(item[myForm.imgField])"
            />
          </view>
          <view class="goods-info">
            <view class="text-overflow-1 goods-title">
              {{ item[myForm.nameField] }}
            </view>
            <view class="goods-code">编号：{{ item[myForm.codeField] }}</view>
            <view class="goods-other">
              <text class="goods-number">
                数量：{{ item[myForm.numberField]
                }}{{
                  item[myForm.numberField] || item[myForm.numberField] == '0'
                    ? item[myForm.numberUnitField]
                    : ''
                }}
              </text>
              <text class="goods-price">
                单价：{{ item[myForm.priceField]
                }}{{
                  item[myForm.priceField] || item[myForm.priceField] == '0'
                    ? item[myForm.priceUnitField] || '元'
                    : ''
                }}
              </text>
            </view>
          </view>
        </view>
        <view class="right">
          <text class="iconfont icon-xiangyou1"></text>
        </view>
      </view>
      <view class="bottom" v-if="showDel">
        <view class="goods-delete" @tap="del(index)">删除</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    showDel: {
      type: Boolean,
      default: true
    },
    form: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      goods: {
        list: []
      },
      myForm: Object.assign(
        {
          imgField: 'goods_image',
          nameField: 'goods_name',
          codeField: 'goods_code',
          numberField: 'number',
          numberUnitField: 'unit_name',
          priceField: 'purchase'
          // priceUnitField: ''
        },
        this.form
      )
    }
  },
  created() {
    getApp().globalData.goods = this.goods
  },
  methods: {
    getGoods() {
      this.goods = getApp().globalData.goods
    },
    edit(i) {
      this.$emit('edit', i)
    },
    del(i) {
      uni.showModal({
        title: '提示',
        content: '是否确认删除？',
        success: ({ confirm }) => {
          if (confirm) this.$emit('delete', i)
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.goods-wrap {
  margin: 20rpx auto;
  padding: 0 24rpx;
  width: 702rpx;
  background: #ffffff;
  border-radius: 16rpx;
  .goods {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    max-height: 212rpx;
    padding: 24rpx 0;
    border-bottom: 1rpx solid #eee;
    &:last-child {
      border-bottom: none;
    }
    .top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .left {
        display: flex;
        .goods-img {
          margin-right: 20rpx;
          width: 100rpx;
          height: 100rpx;
          image {
            width: 100%;
            height: 100%;
            border-radius: 8rpx;
          }
        }
        .goods-info {
          .goods-title {
            width: 300rpx;
            font-weight: 500;
            color: #111111;
          }
          .goods-code {
            font-size: 24rpx;
            color: #666666;
          }
          .goods-other {
            font-size: 24rpx;
            color: #666666;
            .goods-number {
              margin-right: 26rpx;
            }
          }
        }
      }
      .right {
        .icon-jiantou {
          font-size: 24rpx;
          color: #999;
        }
      }
    }
    .bottom {
      align-self: flex-end;
      .goods-delete {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 96rpx;
        height: 48rpx;
        border-radius: 40rpx;
        border: 1px solid #999999;
        font-size: 24rpx;
        color: #666666;
      }
    }
  }
}
</style>
